<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="ajax.js"></script>
<script>
	Date.prototype.shortFormat = function(){
		return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
	}
	ajaxReq = new AjaxRequest();
	
	function addBlogEntry(){
		document.getElementById("add").disabled = true;
		document.getElementById("status").innerHTML="adding.....";
		
		ajaxReq.send("post","input.jsp",requestHandle,"application/x-www-form-urlencoded;charset=UTF-8",
					"date="+document.getElementById("date").value+
					"&body="+document.getElementById("body").value+
					"&image="+document.getElementById("image").value
		);
		
	}
	
	function requestHandle(){
		if(ajaxReq.getReadyState()==4 && ajaxReq.getStatus()==200){
			var txt = ajaxReq.getResponseText();
			if(txt.trim()=="200"){
				document.getElementById("add").disabled = false;
				document.getElementById("status").innerHTML="add ok";
			}else{
				document.getElementById("add").disabled = false;
				document.getElementById("status").innerHTML="add fail <br>("+txt+")";
			}
		}
	}
	
	window.onload = function(ev){
		document.getElementById("date").value = (new Date()).shortFormat();
		document.getElementById("body").focus();
	}
</script>
</head>
<body>
 <h3>YouCube - Adding to the Blog for Cube Puzzlers</h3>
    Date: <input type="text" id="date" name="date" value="" size="10" /><br />
    Body: <input type="text" id="body" name="body" value="" size="60" /><br />
    Image (optional): <input type="text" id="image" name="image" value="" size="20" /><br />
    <input type="button" id="add" value="Add the New Blog Entry" onclick="addBlogEntry();" /><br />
    <div id="status"></div>
</body>
</html>